<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
	<style>
		header{
			z-index: 9999;
			position: fixed;
			top: 0;
			width: 100%;
			height: 50px;
			background-color: #669999;
		}
		header .left{
			font-size: 16px;
			position: absolute;
			top: 13px;
			bottom: 0;
			left: 8px;
			width: 100px;
			height: 50px;
		}
		header .left img{
			width: 24px;
		}
		header .center{
			font-size: 18px;
			position: absolute;
			top: 16px;
			left: 0;
			right: 0;
			color: #fff;
			letter-spacing: 8px;
		}
		#wrap{
			position: fixed;
			background: #B4B4B4;
			width: 100%;
			top: 50px;
			opacity: 0.6;
			display: none;
		}
		#openMenu{
			z-index: 9;
			position: fixed;
			top: 50px;
			background: rgba(102,153,153,1);
			display: none;
			padding-top: 20px;
			letter-spacing: 2px;
		}
		#openMenu .menu{
			width: 100%;
			height: 60px;
			margin-left: 40px;
			font-size: 16px;
			color: #fff;
		}
		#openMenu .menu{
			line-height: 60px;
		}

		#content{
			margin-top: 50px;
		}

		/*轮播图*/
		.swiper-container {
			z-index: 0;
		    width: 100%;
		    max-width: 540px;
		    max-height: 168.750px;
		    height: 100%;
		}
		.swiper-wrapper{
			/*z-index: 999;*/
		}
		.swiper-slide {
		    text-align: center;
		    font-size: 18px;
		    background: #fff;
		    /* Center slide text vertically */
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-pack: center;
		    -ms-flex-pack: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		}
		.swiper-slide > img{
			width: 100%;
			height: 100%;
		}
		.swiper-pagination{
			margin-left: 35%;
		}

		#news_school{
			width: 90%;
			margin-top: 10px;
			margin: 0 auto;
		}
		#newsTitle{
			font-size: 16px;
			font-weight: 800;
			line-height: 30px;
			border-bottom: 1px solid #669999;
		}
		#newsContent{
			font-size: 14px;
			background: #669999;
			color: #fff;
			padding: 10px;
		}
		#newsContent img{
			padding: 10px 0;
			width: 100%;
		}
		#news_school .newsList{
			margin-top: 10px;
		}

		#info{
			width: 90%;
			margin-top: 10px;
			margin: 0 auto;
		}
		#sports{
			width: 90%;
			margin-top: 20px;
			margin: 0 auto;
		}
		#infoTitle,
		#sportsTitle{
			font-size: 16px;
			font-weight: 800;
			line-height: 30px;
			border-bottom: 1px solid #669999;
		}
		#info .infoList,
		#sports .sportsList{
			margin-top: 10px;
			border-bottom: 1px solid #669999;
		}
		#info .infoList .infoLeft,
		#sports .sportsList .sportsLeft{
			float: left;
			text-align: center;
			background: #669999;
			border-radius: 8px;
			width: 70px;
			color: #fff;
		}
		#info .infoList .infoRight,
		#sports .sportsList .sportsRight{
			padding-top: 10px;
			margin-left: 10px;
			color: #777777;
		}
	</style>
</head>
<body>
   	<header>
   		<div class="left" id="leftBtn">
			<img src="../image/more.png">
   		</div>
   		<div class="center">首页</div>
   		<div class="right"></div>
   	</header>

   	<div id="content">
   		<!-- 轮播图 -->
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../image/img1.jpg"></div>
				<div class="swiper-slide"><img src="../image/img2.jpg"></div>
				<div class="swiper-slide"><img src="../image/img3.jpg"></div>
				<div class="swiper-slide"><img src="../image/img4.jpg"></div>
				<div class="swiper-slide"><img src="../image/img5.jpg"></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
			<!-- Add Arrows -->
		</div>

		<div id="news_school">
			<div id="newsTitle">学校新闻<small style="float: right;font-weight: 400;color: #8F8F8F">more</small></div>
			<div class="newsList">
				<div id="newsContent">
					<p>学校教职工羽毛球比赛圆满结束</p>
					<img src="../image/newsi.jpg">
					<p>  日前，由校工会主办、教职工羽毛球协会和体育学院承办、体育学院2015级羽毛球主项专选班协办的2017-2018学年第一学期教职工羽毛球赛在永川体育中心羽毛球馆落下帷幕。</p>
				</div>
			</div>
			<div class="newsList">
				<div id="newsContent">
					<p>学校举行“聂荣臻元帅”精神宣讲会</p>
					<img src="../image/news2.jpg">
					<p>    为深入学习宣传贯彻党的十九大精神，切实增强团员青年的政治性和先进性，1月3日下午，由共青团重庆文理学院委员会、重庆文理学院关心下一代工作委员会主办的第11期“青年马克思主义者”培训学校之“聂荣臻元帅”精神宣讲会在红河校区活动中心三楼举行。</p>
				</div>
			</div>
		</div>

		<div id="info">
			<div id="infoTitle">通知公告<small style="float: right;font-weight: 400;color: #8F8F8F">more</small></div>
			<div class="infoList">
				<div class="infoLeft">
					<h1>06</h1>
					<p>2018-01</p>
				</div>
				<div class="infoRight">
					<h4>关于做好冬春期间重点对象消防安全严防严控工作的通知</h4>
				</div>
			</div>
			<div class="infoList">
				<div class="infoLeft">
					<h1>05</h1>
					<p>2018-01</p>
				</div>
				<div class="infoRight">
					<h4>关于重新申报2018年度预算的通知</h4>
					<p>关于重新申报2018年度预算的通知</p>
				</div>
			</div>
			<div class="infoList">
				<div class="infoLeft">
					<h1>05</h1>
					<p>2018-01</p>
				</div>
				<div class="infoRight">
					<h4>关于开展2017-2018学年第二学期《通识教育选修课》选课的通知</h4>
				</div>
			</div>
		</div>
		<div id="sports">
			<div id="sportsTitle">学术活动<small style="float: right;font-weight: 400;color: #8F8F8F">more</small></div>
			<div class="sportsList">
				<div class="sportsLeft">
					<h1>21</h1>
					<p>2017-12</p>
				</div>
				<div class="sportsRight">
					<h4>Some Problems in Integral and Convex Geometry</h4>
				</div>
			</div>
			<div class="sportsList">
				<div class="sportsLeft">
					<h1>12</h1>
					<p>2017-12</p>
				</div>
				<div class="sportsRight">
					<h4>关于民族政策问题争论的回顾与反思</h4>
				</div>
			</div>
			<div class="sportsList">
				<div class="sportsLeft">
					<h1>04</h1>
					<p>2018-01</p>
				</div>
				<div class="sportsRight">
					<h4>如何提升高校师生科研能力</h4>
					<p>如何提升高校师生科研能力</p>
				</div>
			</div>
		</div>
   	</div>

   	<div id="wrap">
   		
   	</div>
   	<div id="openMenu">
   		<div class="menu" id="person">
   			<span>个人中心</span>
   		</div>
   		<div class="menu" id="xygk">
   			<span>学院概况</span>
   		</div>
   		<div class="menu" id="news">
   			<span>学院新闻</span>
   		</div>
   		<div class="menu" id="xytz">
   			<span>学院通知</span>
   		</div>
   		<div class="menu" id="xylt">
   			<span>学院论坛</span>
   		</div>
   	</div>
</body>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swiper.min.js"></script>
<script type="text/javascript">
    apiready = function(){
  		var w = $(window).width();
  		var h = $(window).height();
  		$(".center").css("left",(w-36)/2 + "px");
  		$("#wrap").css("height",h + "px");
  		$("#openMenu").css({
  			"width":w/2 + "px",
  			"height":(h-50) + "px"
  		});

  		$("#leftBtn").click(function(){
  			$("#wrap").toggle();
  			$("#openMenu").toggle();
  		});
  		$("#wrap").click(function(){
  			$("#wrap").toggle();
  			$("#openMenu").fadeOut(200);
  		});

  		// 轮播图
	    var swiper = new Swiper('.swiper-container', {
	        spaceBetween: 30,
	        centeredSlides: true,
	        autoplay: {
	            delay: 2500,
	            disableOnInteraction: false,
	        },
	        pagination: {
	            el: '.swiper-pagination',
	            clickable: true,
	        },
	    });
    };

    $("#person").click(function(){
  		api.openWin({
         	name: 'login',
            url: '../html/login.html',
            bounces: true,
  		});
  	});

  	$("#xygk").click(function(){
  		api.openWin({
         	name: 'xygk',
            url: '../html/xygk.html',
            bounces: true,
  		});
  	});

  	$("#news").click(function(){
  		api.openWin({
         	name: 'news',
            url: '../html/news.html',
            bounces: true,
  		});
  	});

  	$("#xytz").click(function(){
  		api.openWin({
         	name: 'xytz',
            url: '../html/xytz.html',
            bounces: true,
  		});
  	});

  	$("#xylt").click(function(){
  		api.openWin({
         	name: 'xylt',
            url: '../html/xylt.html',
            bounces: true,
  		});
  	});
</script>
</html>